<template>
  <div id="root">
    <mu-appbar class="mu-appbar" :z-depth="2" color="primary">
      {{ showDetail ? "药品信息" : '' }}
      <mu-flex id="search-wrap" align-items="center" v-if="!showDetail">
        <mu-icon id="search-icon" value="search" color="grey500"></mu-icon>
        <input class="d-flex flex-fill"
               id="search"
               autofocus
               v-model="searchText"
               @keyup.enter="search"
               placeholder="搜索药品信息…"/>
      </mu-flex>
      <mu-button icon slot="left" v-if="showDetail" @click="onBack">
        <mu-icon value="arrow_back"></mu-icon>
      </mu-button>
    </mu-appbar>

    <div id="list-wrap">
      <mu-load-more :loaded-all="loadedAll" :loading="loading" @load="load" v-show="!showDetail">
        <mu-list id="mu-list" @change="onItemClick">
          <template v-for="(value, index) in listData">
            <mu-list-item
                    class="mu-list-item"
                    button
                    :ripple="true"
                    :key="index"
                    :value="index">
              <mu-flex class="item-content-wrap" align-items="center" justify-content="around" fill>
                <mu-flex fill direction="column" justify-content="center">
                  <mu-list-item-title class="d-flex flex-fill item-title">{{ value.name }}</mu-list-item-title>
                  <p class="d-flex flex-fill item-indications">{{ value.efficacy }}</p>
                </mu-flex>
                <img :src="value.image"/>
              </mu-flex>
            </mu-list-item>
            <mu-divider/>
          </template>
        </mu-list>
      </mu-load-more>

      <mu-fade-transition>
        <div id="detail-container" v-show="showDetail">
          <div id="detail-header">
            <img :src="detail.image"/>
            <h1>{{ detail.name }}</h1>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">成分</h6>
            <p class="detail-text">{{ detail.composition }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">功能主治</h6>
            <p class="detail-text">{{ detail.efficacy }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">用法用量</h6>
            <p class="detail-text">{{ detail.medicineUsage }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">禁忌症</h6>
            <p class="detail-text">{{ detail.contraindication }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">价格</h6>
            <p class="detail-text">{{ detail.price }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">医保类型</h6>
            <p class="detail-text">{{ detail.insuranceType }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">药品属性</h6>
            <p class="detail-text">{{ detail.medicineType }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">注意事项</h6>
            <p class="detail-text">{{ detail.attention }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">生产商</h6>
            <p class="detail-text">{{ detail.producer }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">批准文号</h6>
            <p class="detail-text">{{ detail.permitId }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">规格</h6>
            <p class="detail-text">{{ detail.size }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">储存</h6>
            <p class="detail-text">{{ detail.store }}</p>
          </div>
          <div class="detail-text-wrap">
            <h6 class="detail-text-label">有效期</h6>
            <p class="detail-text">{{ detail.validityTime }}</p>
          </div>
        </div>
      </mu-fade-transition>

    </div>

  </div>
</template>

<script lang="ts">
  import medicineService from "@/phr/service/medicine/MedicineService";
  import {SUCCESS} from "@/phr/common/ErrorCode";


  let constant = {
    network_error: "网络异常",
    no_date: "没有数据",
  };

  export default {

    data() {
      return {
        listData: [],
        searchText: "",
        searchTextCache: "",
        page: 1,
        showDetail: false,
        listScrollTop: 0,
        detailScrollTop: 0,
        loading: false,
        loadedAll: false,
        detail: {
          id: 0,
          name: "",
          image: "",
          composition: "",
          efficacy: "",
          medicineUsage: "",
          contraindication: "",
          price: "",
          insuranceType: "",
          medicineType: "",
          attention: "",
          producer: "",
          permitId: "",
          size: "",
          store: "",
          validityTime: ""
        },
      }
    },
    watch: {
      showDetail(value) {
        let elem = document.getElementById("list-wrap");
        // 显示药品列表时，滚动条滚动到原来的位置
        elem.scrollTop = this.listScrollTop;
        if (elem && elem.scrollTop) {
          if (value) {
            // 显示药品详细信息时，滚动条滚动到顶部
            elem.scrollTop = 0;
          } else {
            console.log(elem.scrollTop);
          }
        }
      }
    },
    methods: {
      onItemClick(index) {
        this.storeScrollPosition();

        let obj = this.listData[index];
        this.detail.id = obj.id;
        this.detail.name = obj.name;
        this.detail.image = obj.image;

        // 显示药品详细信息
        this.showDetail = true;

        // 显示药品详细信息时，滚动条滚动到顶部
        let elem = document.getElementById("list-wrap");
        if (elem && elem.scrollTop) {
          elem.scrollTop = 0;
        }

        medicineService.getMedicineDetail(obj.id)
            .then(res => {
              if (res.code === SUCCESS) {
                let v = res.value;
                // 去除包裹药品名称的括号
                v.name = this.removeBrackets(v.name);
                this.detail = v;
              } else {
                this.$toast.info(res.message);
              }
            })
            .catch(e => {
              console.log(e);
              this.$toast.info(constant.network_error);
            });
      },
      search() {
        // 初始化变量
        this.page = 1;
        this.loadedAll = false;
        // 缓存搜索关键词
        this.searchTextCache = this.searchText;

        medicineService.searchMedicine(this.searchTextCache, this.page)
            .then(res => {
              if (res.code === SUCCESS) {
                let value = res.value.value;
                value.forEach((v) => {
                  // 去除包裹药品名称的括号
                  v.name = this.removeBrackets(v.name);
                });
                this.listData = value;

                if (value.length === 0) {
                  // 没有数据
                  this.$toast.info(constant.no_date);
                }

                if (res.value.currentPage >= res.value.maxPage) {
                  // 所有搜索结果已加载完
                  this.loadedAll = true;
                }
              } else {
                this.$toast.info(res.code.message);
              }
            })
            .catch(() => {
              this.$toast.info(constant.network_error);
            });
      },
      load() {
        // 显示加载更多的进度条
        this.loading = true;

        medicineService.searchMedicine(this.searchTextCache, ++this.page)
            .then(res => {
              if (res.code === SUCCESS) {
                let value = res.value.value;
                value.forEach((v) => {
                  // 去除包裹药品名称的括号
                  v.name = this.removeBrackets(v.name);
                  this.listData.push(v);
                });

                if (res.value.currentPage >= res.value.maxPage) {
                  // 所有搜索结果已加载完
                  this.loadedAll = true;
                }
              } else {
                this.$toast.info(res.code.message);
              }
              // 隐藏加载更多的进度条
              this.loading = false;
            })
            .catch((e) => {
              this.$toast.info(constant.network_error);
              // 隐藏加载更多的进度条
              this.loading = false;
              console.log(e);
            });
      },
      onBack() {
        this.showDetail = false;
      },
      removeBrackets(str) {
        if (str.length > 0 && str.charAt(0) === "(") {
          return str.substring(1, str.length - 1);
        }
        return str;
      },
      storeScrollPosition() {
        this.listScrollTop = 0;
        let elem = document.getElementById("list-wrap");
        if (elem && elem.scrollTop) {
          this.listScrollTop = elem.scrollTop;
        }
        console.log(this.listScrollTop);
      }
    }
  }
</script>

<style scoped>
  #root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
  }

  .mu-appbar {
    width: 100%;
  }

  #search-wrap {
    font-size: unset;
    padding: 0;
    margin: 0 -8px;
    background: #fff;
    border-radius: 3px;
    height: 48px;
  }

  #search {
    width: 100%;
    outline: none;
    height: 48px;
    border-width: 0;
    font-size: 16px;
    margin-right: 16px;
  }

  #search-icon {
    margin: 0 16px;
  }

  #list-wrap {
    flex: 1;
    overflow: auto;
  }

  .mu-list-item {
    height: auto;
  }

  .item-content-wrap {
    padding: 8px 0;
  }

  .item-content-wrap img {
    flex-shrink: 0;
  }

  .mu-list-item img {
    width: 100px;
    height: 60px;
    margin-left: 8px;
    object-fit: contain;
  }

  .item-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
  }

  .item-indications {
    font-size: 14px;
    line-height: 21px;
    padding: 0;
    color: #616161;
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
    height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-text-label {
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .54);;
    box-sizing: border-box;
  }

  .detail-text {
    font-size: 16px;
    line-height: 24px;
    padding: 4px 0;
    color: rgba(0, 0, 0, .87);
    font-weight: 400;
    margin: 0;
    box-sizing: border-box;
  }

  .detail-text-wrap {
    margin-bottom: 8px;
  }

  #detail-container {
    width: 100%;
    padding: 8px 16px;
    overflow-y: scroll;
    height: 100%;
  }

  #detail-header {
    text-align: center;
  }

  #detail-header h1 {
    font-size: 20px;
  }

  #detail-container img {
    margin: 0 auto;
  }
</style>

<style>
  .mu-list-item .mu-item {
    height: 100%;
  }
</style>